<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>导航栏</title>
		<style type="text/css">
			/**浏览器兼容处理：不同浏览器对margin和padding解析不同**/
			
			* {
				margin: 0px;
				padding: 0px;
			}
			
			body {
				background-color: #F5F6F7;
			}
			/*主体*/
			
			#container {
				height: 600px;
			}
			/*头部*/
			
			#header {
				height: 60px;
				background-color: #FFFFFF;
				margin: 4px 0px;
				padding-top: 5px;
			}
			/*主体内容*/
			
			#content {
				margin-top: 2px;
				height: 540px;
			}
			/*底部*/
			
			#footer {
				height: 30px;
				background-color: #FFFFFF;
			}
			/**导航栏**/
			
			.navSytle {
				width: 570px;
				height: 50px;
				margin: 0px auto;
			}
			/*a超链接标签的样式*/
			div[class="navSytle"] ul a{
				text-decoration: none;
			}
			/*去掉ul标签的样式*/
			div[class="navSytle"] ul {
				list-style: none;	
				padding-top: 15px;
				padding-left: 40px;			
			}
			/*导航栏各项内容左浮动*/
			div[class="navSytle"] ul li{
				float: left;
				padding-left: 15px;	
				padding-right: 15px;				
				border-right: 1px solid #8CC5F3;		
			}
			
			div[class="navSytle"] ul li:last-child{
				border-right: 0px ;
			}
		</style>
	</head>

	<body>
		<!--表示划分了整个body区域-->
		<div id="container">
			<div id="header">
				<!--导航栏-->
				<div id="nav" class="navSytle">
					<ul>
						<li></li>
						<li>
							<a href="#">首页</a>
						</li>
						<li></li>
						<li>
							<a href="#">用户管理</a>
						</li>
						<li></li>
						<li>
							<a href="#">购物车</a>
						</li>
						<li></li>
						<li>
							<a href="#">订单</a>
						</li>
						<li></li>
						<li>
							<a href="#">退出</a>
						</li>
						<li>
							<a href="#">登录</a>
						</li>
						<li>
							<a href="#">注册</a>
						</li>
					</ul>
				</div>
			</div>
			<div id="content">
			</div>
			<div id="footer"></div>
			<div id="div-absolute"></div>
		</div>
	</body>

</html>